<template>
    <f7-page>
        <f7-navbar>
            <f7-nav-left back-link=" " sliding></f7-nav-left>
            <f7-nav-center>角色头像</f7-nav-center>
        </f7-navbar>
        <div class="main avatar-list">
            <f7-grid>
                <f7-col>
                    <div class="img-wrap" @click="back">
                        <img src="../../assets/images/test.jpg">
                    </div>
                    <p>于谦</p>
                </f7-col>
                <f7-col>
                    <div class="img-wrap" @click="back">
                        <img src="../../assets/images/test.jpg">
                    </div>
                    <p>郭德纲</p>
                </f7-col>
                <f7-col>
                    <div class="img-wrap" @click="back">
                        <img src="../../assets/images/test.jpg">
                    </div>
                    <p>小岳岳</p>
                </f7-col>
                <f7-col>
                    <div class="img-wrap" @click="back">
                        <img src="../../assets/images/test.jpg">
                    </div>
                    <p>于谦</p>
                </f7-col>
            </f7-grid>
            <f7-grid>
                <f7-col>
                    <div class="img-wrap" @click="back">
                        <img src="../../assets/images/test.jpg">
                    </div>
                    <p>于谦</p>
                </f7-col>
                <f7-col>
                    <div class="img-wrap" @click="back">
                        <img src="../../assets/images/test.jpg">
                    </div>
                    <p>郭德纲</p>
                </f7-col>
                <f7-col>
                    <div class="img-wrap" @click="back">
                        <img src="../../assets/images/test.jpg">
                    </div>
                    <p>小岳岳</p>
                </f7-col>
                <f7-col>
                    <f7-link icon-fa="plus-circle" class="btn-add" @click="openImgAlbum"></f7-link>
                </f7-col>
            </f7-grid>
        </div>

        <f7-popup id="imgAlbum" :opened="imgAlbumState" @popup:closed="changeImgAlbumState">
            <f7-view navbar-fixed>
                <f7-pages>
                    <f7-page>
                        <f7-navbar>
                            <f7-nav-left sliding>
                                <f7-link icon-fa="close" @click="closeImgAlbum"></f7-link>
                            </f7-nav-left>
                            <f7-nav-center>相机胶卷</f7-nav-center>
                        </f7-navbar>
                        <div class="main img-album">
                            <f7-grid no-gutter>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                            </f7-grid>
                            <f7-grid no-gutter>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                            </f7-grid>
                            <f7-grid no-gutter>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                            </f7-grid>
                            <f7-grid no-gutter>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                            </f7-grid>
                            <f7-grid no-gutter>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                            </f7-grid>
                            <f7-grid no-gutter>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                            </f7-grid>
                            <f7-grid no-gutter>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                            </f7-grid>
                            <f7-grid no-gutter>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="openPhotoBrowser">
                                        <img src="../../assets/images/test.jpg">
                                    </div>
                                </f7-col>
                            </f7-grid>
                        </div>
                    </f7-page>
                </f7-pages>
            </f7-view>
        </f7-popup>

        <f7-photo-browser ref="photoBrowser" :params="{photos: photos, theme: 'dark', navbar: false, exposition: false, captionTemplate: captionTpl, toolbarTemplate: toolbarTpl, onOpen: addEvent}">
        </f7-photo-browser>
    </f7-page>
</template>

<style lang="scss">
    .avatar-editor a.link{
        width: auto;
    }
</style>


<script>
    export default {
        data() {
            return {
                imgAlbumState: false,
                photos: [{
                    url: '/static/img/test.e6f2beb.jpg',
                    caption: 'test'
                }],
                captionTpl: '<div class="photo-browser-caption" data-caption-index="{{@index}}">{{cation}}</div>',
                toolbarTpl: '<div class="toolbar tabbar avatar-editor">\
                                <div class="toolbar-inner">\
                                    <a href="javascript:;" class="link photo-browser-prev">\
                                        <i class="icon fa fa-close {{iconsColorClass}}"></i>\
                                    </a>\
                                    <a href="javascript:;" class="link photo-browser-next">\
                                        <i class="icon fa fa-check {{iconsColorClass}}"></i>\
                                    </a>\
                                </div>\
                            </div>'
            }
        },
        methods: {
            changeImgAlbumState() {
                this.imgAlbumState = false
            },
            openImgAlbum() {
                this.imgAlbumState = true
            },
            closeImgAlbum() {
                this.imgAlbumState = false
            },
            openPhotoBrowser() {
                this.$refs.photoBrowser.open()
            },
            closePhotoBrowser() {
                this.$refs.photoBrowser.close()
            },
            addEvent() {
                document.querySelector('.photo-browser-prev').addEventListener('click', () => {
                    this.closePhotoBrowser()
                })

                document.querySelector('.photo-browser-next').addEventListener('click', () => {
                    this.closePhotoBrowser()
                })
            },
            back() {
                this.$router.back()
            }
        }
    }
</script>